<template xmlns:v-clipboard="http://www.w3.org/1999/xhtml">
  <div class="myProject">
    <div class="table_title background">
      <span class="project-detail">项目详细</span>
      <span style="margin-left: 10px;">招募简介</span>
      <span style="width: 5%;">联系方式</span>
      <span>项目时间</span>
      <span style="width: 7%;">状态</span>
      <span style="width: 5%;">操作</span>
    </div>
    <div v-for="item, index in myProjectList">
      <div class="text">
      <span class="title">
        项目编号：&nbsp;{{item.projectNumber}}&nbsp;&nbsp;&nbsp;
        发布人：&nbsp;{{item.realName}}&nbsp;&nbsp;&nbsp;发布时间:&nbsp;{{item.createTime}}
      </span>
      </div>
      <div class="table_title tbody_height tbody_border">
        <div class="one tbody_one">
          <div class="tbody_one_text">
            <div class="tbody_one_text_title">项目主题:</div>
            <div class="tbody_one_text_comtent">{{item.projectName}}</div>
          </div>
          <div class="tbody_one_text">
            <div class="tbody_one_text_title">项目地点:</div>
            <div class="tbody_one_text_comtent">{{item.projectAddress}}</div>
          </div>
          <div class="tbody_one_text">
            <div class="tbody_one_text_title">招募人数:</div>
            <div class="tbody_one_text_comtent">{{item.recruiting}}</div>
          </div>
        </div>
        <div class="tbody_two">
          <span @click="dialogVisible = true; selectRow = index">查看</span>

        </div>
        <div class="tbody_three">{{item.contact}}</div>
        <div class="tbody_four">{{item.projectStartDate}}
          <br>-
          <br>{{item.projectEndDate}}
        </div>
        <div class="tbody_five">{{item.status == '1' ? '进行中' : '已完成'}}</div>
        <div class="tbody_six">
          <button v-if="item.status == '1'" @click="shareProject(item)">分享</button>
          <button @click="manage(item.projectID,item.status)">管理名单</button>
        </div>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="100"
        layout="prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 招募简介 -->
    <el-dialog title="招募简介" :visible.sync="dialogVisible" width="40%">
      <div class="dialog_look">
        <span>{{myProjectList.length == 0 ? "" : myProjectList[selectRow].recruitingContent}}</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="dialog_text" @click="dialogVisible = false">
          <span>确认</span>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="分享" :visible.sync="shareDialogVisible" width="40%">
      <div class="dialog_look">
        <span style="width: 65%;">{{shareUrl}}</span>
        <el-button style="margin-left: 80%;" v-clipboard:copy="shareUrl" v-clipboard:success="copySuccess">复制链接
        </el-button>
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="dialog_text" @click="shareDialogVisible = false">
          <span>确认</span>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import ElDialog from "../../../node_modules/element-ui/packages/dialog/src/component";
  export default {
    components: {ElDialog},
    data() {
      return {
        shareUrl: '',
        shareDialogVisible: false,
        isModify: false,
        projectID: "",
        selectRow: 0,
        dialogVisible: false,
        adddialog: false,
        editdialog: false,
        applyEditDialog: false,
        currentPage4: 4,
        page: 1,
        total: 0,
        isRefresh: false,
        myProjectList: [],
        form: {
          name: "",
          projectName: "",
          recruiting: "",
          projectAddress: "",
          date: [],
          recruitingContent: "",
          contact: "",
          cover: ""
        },
        applyCase: "",
        rules: {
          projectAddress: [{required: true, message: "请选择主题", trigger: "change"}],
          projectName: [{required: true, message: "请输入主题", trigger: "blur"}],
          recruiting: [{required: true, message: "请填写招募人数", trigger: "blur"}],
          recruitingContent: [{required: true, message: "请填写招募简介", trigger: "blur"}],
          date: [{required: true, message: '请选择时间范围', trigger: 'change'}],
          contact: [{required: true, message: "请输入联系方式", trigger: 'blur'}],
          applyCase: [{required: true, message: "请输入原因", trigger: 'blur'}]
        },
      };
    },
    mounted() {
      this.getMyProjectList(30, 1);
    },
    methods: {
      getMyProjectList(pageSize, page) {
        let self = this;
        let obj = {projectType: 0, pageSize: pageSize, page: page};
        self.$fetch("/Category/getProject", obj).then(res => {
          if (res.code == "200") {
            console.log(res);
            self.myProjectList = res.data.projectList;
            this.total = res.data.pageCount;
          } else {

          }
        });
      },
      closeAdd() {
        this.form = [];
        this.isRefresh = false;

      },
      uploadFileImage(file) {
        let self = this;
        var formDate = new FormData();
        formDate.append("file_image", file.file);
        console.log(file);
        self.$upload("/File/uploadsImage", formDate).then(res => {
          if (res.code == "200") {
            console.log(res);
            self.form.cover = res.data.fileUrl;
            self.isRefresh = false;
            self.isRefresh = true;
            console.log(self.form.cover);
          } else {
          }
        });
      },
      submit(formName) {
        this.$refs[formName].validate(async (valid) => {
          console.log(valid)
          if (valid) {
            let self = this;
            let obj = {
              token: self.globalData.token,
              projectStartDate: self.form.date[0],
              projectEndDate: self.form.date[1],
              projectName: self.form.projectName,
              projectAddress: self.form.projectAddress,
              recruiting: self.form.recruiting,
              recruitingContent: self.form.recruitingContent,
              contact: self.form.contact,
              cover: self.form.cover
            };
            if (self.isModify) {
              obj.projectID = self.projectID;
            }

            self.$post("/User/createUserProject", obj).then(res => {
              if (res.code == "200") {
                console.log(res);
                self.adddialog = false;
                self.editdialog = false;
                self.projectID = "";
                this.isModify = false;
                self.getMyProjectList(30, self.page);
              } else {

              }
            });
          } else {

            return false;
          }
        });
      },
      submitApply(){
        let self = this;
        if (this.applyCase === '') {
          self.$message.error('请输入修改原因');
          return;
        }
        let obj = {
          token: self.globalData.token,
          projectID: this.projectID,
          projectContent: this.applyCase,
        };
        self.$post("/User/createUserProjectNote", obj).then(res => {
          if (res.code === "200") {
            self.projectID = "";
            self.applyCase = "";
            self.applyEditDialog = false;
          } else {
            self.$message.error(res.message);
          }
        });
      },
      onSubmit() {
        console.log("submit!");
      },
      handleSizeChange() {
        this.page = 1;
        this.getMyProjectList(30, this.page);
      },
      handleCurrentChange() {
        this.page = val;
        this.getMyProjectList(30, this.page);
      },
      add() {
        this.form = [];
        this.adddialog = true;
        console.log(this.form);
      },
      edit(item, index) {
        this.selectRow = index;
        this.projectID = item.id;
        if (item.isAudit === '1') {
          this.applyEditDialog = true;
        } else {
          this.isModify = true;
          this.editdialog = true;
          this.isRefresh = false;
          let arrCopy = JSON.parse(JSON.stringify(this.myProjectList));
          this.form = arrCopy[this.selectRow];

          // this.form = arr[this.selectRow];
          this.form.date = [this.form.projectStartDate, this.form.projectEndDate];
          this.isRefresh = true;
        }
      },
      shareProject(item){
        if (item.isAudit === '0') {
          this.$message.error('项目未审核通过不能分享，请联系管理员审核项目！');
        } else {
//          this.shareUrl = "http://localhost:8080/#/projectDetail";
          this.shareUrl = "https://www.starnests.com/#/projectDetail";
          this.shareUrl += '?projectID=' + item.projectID;
          this.shareDialogVisible = true;
        }
      },
      copySuccess() {
        this.$message({
          message: '复制成功',
          type: 'success'
        });
        this.shareDialogVisible = false;
      },
      manage(projectID, status) {
        this.$router.push({path: "/nameList", query: {projectID: projectID, status: status}});
      },
      deleteDialog(projectID){
        let self = this;
        this.$confirm('是否要删除该项目?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.deleteProject(projectID);
        }).catch(() => {

        });
      },
      deleteProject(projectID){
        let self = this;
        let obj = {token: self.globalData.token, projectID: projectID};
        self.$fetch("/User/deleteProject", obj).then(res => {
          if (res.code == "200") {
            self.getMyProjectList(30, 1);
            self.$message("删除成功");
          } else {
            self.$message.error(res.message);
          }
        });
      }
    }
  };
</script>

<style scoped lang="less">
  .myProject {
    width: 80%;
    margin: auto;
    .newadd {
      border: 1px solid #b3302e;
      outline: none;
      font-size: 12px;
      color: white;
      background-color: #b3302e;
      letter-spacing: 0.8px;
      margin-bottom: 15px;
      width: 70px;
      height: 36px;
      border-radius: 4px;
    }
    .background {
      background-color: #f5f5f5;
      justify-content: space-around;
      height: 36px;
    }

    .project-detail {
      width: 25%;
    }
    .table_title {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      font-size: 12px;
      .one {
        width: 30%;
      }
    }
    .text {
      margin-top: 15px;
      background-color: #f5f5f5;
      width: 100%;
      /*height: 36px;*/
      line-height: 36px;
      font-size: 12px;
      .title {
        padding-left: 15px;
      }
    }

    .tbody_one {
      margin-top: 10px;
      width: 100%;
      /*display: flex;*/
      /*flex-wrap: wrap;*/
      /*flex-direction: column;*/
      font-size: 12px;

      .tbody_one_text {
        display: flex;
        flex-direction: row;
        .tbody_one_text_title {
          width: 20%;
        }
        .tbody_one_text_comtent {
          width: 80%;

          height: 30px;
          word-wrap: break-word;
        }
      }
    }
    .tbody_two {
      color: #b3302e;
    }

    .tbody_six {
      width: 12%;
      button {
        margin-right: 6px;
        // border: 1px solid white;
        outline: none;
        background-color: white;
        border-radius: 4px;
        margin: 2px;
        color: black;
      }
    }
    .tbody_border {
      border: 1px solid #f0f0f0;
    }
    .project-add {
      width: 395px;
      height: 40px;
    }
  }

  .dialog_look {
    word-wrap: break-word;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: auto;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: auto;
    display: block;
  }
</style>
